<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>

        <div>

            <div id="one"> <input type="checkbox" class="yi" name="oneyi" value="1"> 一级菜单</div>
            <ul>
                <li>
                    <div id="two1"><input type="checkbox" class="er1" name="twoer">二级菜单1</div>
                    <ul>
                        <li id="three1"><input type="checkbox" class="three1">三级菜单1</li>
                        <li id="three2"><input type="checkbox"  class="three2">三级菜单2</li>
                        <li id="three3"><input type="checkbox"  class="three3">三级菜单3</li>
                    </ul>
                </li>
                <li>
                    <div id="two2"><input type="checkbox" class="er2">二级菜单2</div>

                    <ul>
                        <li id="three1"><input type="checkbox">三级菜单1</li>
                        <li id="three2"><input type="checkbox">三级菜单2</li>
                        <li id="three3"><input type="checkbox">三级菜单3</li>
                    </ul>
                </li>
                <li>
                    <div id="two3"> <input type="checkbox" class="er">二级菜单3 </div>
                    <ul>
                        <li id="three1"><input type="checkbox">三级菜单1</li>
                        <li id="three2"><input type="checkbox">三级菜单2</li>
                        <li id="three3"><input type="checkbox">三级菜单3</li>
                    </ul>
                </li>

            </ul>
        </div>



    </div>
    <script>
        //获取一级菜单的id
        var one = document.getElementById("one")
        var oneInput = document.getElementsByClassName('yi')


        //获取二级菜单的id
        var two1 = document.getElementById("two1")
        var two2 = document.getElementById("two2")
        var two3 = document.getElementById("two3")
        var twoInput1 = document.getElementsByClassName('er1')

        //获取三级菜单的id
        var three1 = document.getElementById("three1")
        var three2 = document.getElementById("three2")
        var three3 = document.getElementById("three3")
        var threeInput1 = document.getElementsByClassName('three1')
        var threeInput2 = document.getElementsByClassName('three2')
        var threeInput3 = document.getElementsByClassName('three3')




        // 设定条件
        let asd = true
        let asd2 = false
        let asdf = true
        let asdfg = true
        var inputAll;

        //选中项
        // for (let i = 0; i < input1.length; i++) {
        //     console.log(input1[i].checked);


        // }

        // 一级菜单
        one.onclick = function () {
            for (let i = 0; i < oneInput.length; i++) {
                // console.log(oneInput[i].checked );
                if (asd) {
                    oneInput[i].checked = true
                    asd = false
                    two1.style.display = "block"
                    two2.style.display = "block"
                    two3.style.display = "block"
                } else {
                    asd = true
                    oneInput[i].checked = false
                    two1.style.display = "none"
                    two2.style.display = "none"
                    two3.style.display = "none"
                }
            }
        }
        //二级菜单
        two1.onclick = function () {
            for (let i = 0; i < twoInput1.length; i++) {
                if (asdf) {
                    twoInput1[i].checked = true
                    asdf = false
                    three1.style.display = "block"
                    three2.style.display = "block"
                    three3.style.display = "block"
                } else {
                    three1.style.display = "none"
                    three2.style.display = "none"
                    three3.style.display = "none"
                    asdf = true
                    twoInput1[i].checked = false
                }
            }
        }
        //三级菜单
        three1.onclick = function () {
            for (let i = 0; i < threeInput1.length; i++) {
                if(threeInput1[i].checked == false){
                    threeInput1[i].checked = true
                }else{
                    threeInput1[i].checked = false
                }
            }
        }
        three2.onclick = function () {
            for (let i = 0; i < threeInput2.length; i++) {
                if(threeInput2[i].checked == false){
                    threeInput2[i].checked = true
                }else{
                    threeInput2[i].checked = false
                }
            }
        }
        three3.onclick = function () {
            for (let i = 0; i < threeInput3.length; i++) {
                if(threeInput3[i].checked == false){
                    threeInput3[i].checked = true
                }else{
                    threeInput3[i].checked = false
                }
            }
        }

    </script>

</body>
<style>
    ul,
    li {
        list-style: none;
    }

    #two3 {
        display: none;
    }

    #two2 {
        display: none;
    }

    #two1 {
        display: none;
    }

    #three1 {
        display: none;
    }

    #three2 {
        display: none;
    }

    #three3 {
        display: none;
    }
</style>

</html>